@charset "utf-8";
$fontsize:40;
@function r($px) {
    @return $px/$fontsize * 1rem;
}

* {
    margin: 0;
    padding: 0;
    font-size: 0;
}



body {
    #web {
        width: 100%;
        height: 100%;
        .background {
            width: 100%;
            height: 100%;
            position: relative;
            background: url(../../img/background.png);
            background-size: 100% 100%;
            img {
                width: 100%;
                height: 100%;
            }
            .title {
                padding-left: r(70);
                padding-top: r(30);
                width: r(622);
                height: r(313);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .start {
                position: absolute;
                top: r(550);
                left: r(297);
                width: r(210);
                height: r(190);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .btn1 {
                position: absolute;
                top: r(980);
                left: r(220);
                width: r(330);
                height: r(100);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .btn2 {
                position: absolute;
                top: r(1100);
                left: r(220);
                width: r(330);
                height: r(100);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .game {
                position: absolute;
                top: r(350);
                left: r(90);
                display: none;
                width: r(589);
                height: r(366);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .background1 {
            width: 100%;
            height: 100%;
            position: relative;
            background: url(../../img/bg_liang1.jpg);
            background-size: 100% 100%;
            .progress img {
                width: r(592);
                height: r(167);
                margin: 0 auto;
                padding-left: r(80);
                padding-top: r(30);
            }
            .progress2 {
                width: r(440);
                height: r(79);
                position: absolute;
                top: r(65);
                left: r(213);
                  display:none;
                img {
                    width: 100%;
                    height: 100%;
                }
                
            }
            .progress3{
                display: block !important;
            }
            .bottle {
                width: r(450);
                height: r(900);
                padding-left: r(165);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .boom {
                width: r(500);
                height: r(140);
                img {
                    width: 100%;
                    height: 100%;
                    padding-left: r(230);
                }
            }
            .spark {
                position: absolute;
                bottom: r(80);
                float: right;
                right: 0;
                display: none;
                width: r(70);
                height: r(70);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .background2 {
            width: 100%;
            height: 100%;
            position: relative;
            background: url(../../img/bg_liang.jpg);
            background-size: 100% 100%;
            .progress {
                width: r(592);
                height: r(167);
                margin: 0 auto;
                padding-left: r(50);
                padding-top: r(25);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .progress2 {
                width: r(440);
                height: r(79);
                position: absolute;
                top: r(62);
                left: r(237);
                display: none;
                img {
                    width: 100%;
                    height: 100%;
                }
                
            }
            .result1 {
                width: r(749);
                height: 80%;
                img {
                    position: absolute;
                    top: r(150);
                    width: 100%;
                    height: 88%;
                }
            }
            .break {
                position: absolute;
                bottom: r(30);
                left: r(30);
                width: r(50);
                height: r(50);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .volume1 {
                position: absolute;
                bottom: r(30);
                right: r(30);
                width: r(50);
                height: r(50);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .volume2 {
                position: absolute;
                bottom: r(30);
                right: r(30);
                display: none;
                img {
                    width: r(50);
                    height: r(50);
                }
            }
        }
        .background3 {
            width: 100%;
            height: 100%;
            position: relative;
            background: url(../../img/bg_liang.jpg);
            background-size: 100% 100%;
           
            .draw_title {
                width: r(620);
                img {
                    width: 100%;
                    height: r(150);
                    padding-left: r(80);
                    padding-top: r(50);
                }
            }
            .bottle1 {
                width: r(100);
                height: r(300);
                padding-top: r(150);
                padding-left: r(170);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .bottle2 {
                width: r(100);
                height: r(300);
                padding-top: r(150);
                padding-left: r(170);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .bottle3 {
                width: r(375);
                width: r(100);
                height: r(300);
                padding-top: r(150);
                padding-left: r(170);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .bottle4 {
                width: r(375);
                width: r(100);
                height: r(300);
                padding-top: r(150);
                padding-left: r(170);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .draw_title2 {
                width: r(620);
                height: r(180);
                padding-left: r(65);
                padding-top: r(150);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .some_bottle {
                width: r(500);
                height: r(300);
                padding-left: r(130);
                padding-top: r(150);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .text {
                width: r(300);
                height: r(60);
                padding-top: r(60);
                padding-left: r(220);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .like {
                width: r(500);
                padding-left: r(130);
                padding-top: r(60);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .some_bottle1 img {
                width: r(150);
                height: r(350);
                padding-left: r(300);
                padding-top: r(60);
            }
            .text1 {
                width: r(300);
                height: r(110);
                padding-top: r(60);
                padding-left: r(220);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .like1 {
                width: r(500);
                height: r(110);
                padding-left: r(130);
                padding-top: r(60);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .p {
                padding-top: r(190);
                padding-bottom: r(50);
                p {
                    font-size: r(50);
                    color: #fff;
                    text-align: center;
                }
            }
            p {
                span {
                    width: r(150);
                    font-size: r(30);
                    line-height: r(50);
                    color: #fff;
                    text-align: center;
                    float: left;
                    margin-top: r(50);
                }
                input {
                    float: left;
                    width: r(550);
                    height: r(40);
                    line-height: r(50);
                    overflow: hidden;
                    margin-top: r(50);
                    font-size: r(20);
                }
                .inp {
                    height: r(200);
                }
            }
            .submit {
                width: r(300);
                padding-top: r(60);
                padding-left: r(250);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .pt1 {
                width: r(640);
                height: r(100);
                padding-top: r(250);
                padding-left: r(60);
                padding-bottom: r(100);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .pt2,
            .pt3 {
                width: r(400);
                padding-top: r(90);
                padding-left: r(180);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .background4 {
            width: 100%;
            height: 100%;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
}